<template>
  <div class="app-container">
        <el-form :model="formData"  ref="elForm" size="small" v-show="showSearch"  :inline="true" label-width="68px">
            <el-form-item label="项目名称" prop="projectid">
                <el-select 
                    v-model="formData.projectid" 
                    placeholder="请选择项目名称"  
                    style="width: 140px">
                        <el-option 
                            v-for="(item, index) in projectidOptions" 
                            :key="index" 
                            :label="item.projectname"
                            :value="item.projectid"
                            align="center"
                        />
                </el-select>
            </el-form-item>
            <el-form-item label="客户性质" prop="custtype">
                <el-select 
                    v-model="formData.custtype" 
                    placeholder="请选择客户性质"  
                    style=" width: 140px"
                >
                    <el-option 
                        v-for="(item, index) in custtypeOptions" 
                        :key="index" 
                        :label="item.label"
                        :value="item.value" 
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="客户类型" prop="custstate">
                <el-select v-model="formData.custstate" placeholder="请选择客户类型" style=" width: 140px">
                    <el-option 
                        v-for="(item, index) in custstateOptions" 
                        :key="index" 
                        :label="item.cuStStateName"
                        :value="item.cuStStateId" 
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="custname">
                <el-input v-model="formData.custname" 
                    placeholder="请输入客户名称"  
                    clearable
                    style=" width: 140px"/>
            </el-form-item>
            <el-form-item label="日期范围">
                <el-date-picker 
                    type="daterange" 
                    v-model="signdateDateRange"
                    value-format="yyyy-MM-dd" 
                    style=" width: 190px" 
                    start-placeholder="开始日期" 
                    range-separator="至"
                    end-placeholder="结束日期"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row class="mb8" style="text-align:">
            <el-col>
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['system:dict:export']"
                >导出</el-button>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-col>
        </el-row>
        <el-table :data="list">
            <el-table-column label="序号" width="55" align="center" prop="buyId" />
            <el-table-column label="客户名称" width="80" align="center" prop="custName"/>
            <el-table-column label="业务员" width="80" align="center" prop="salePerson"/>
            <el-table-column label="客户房产" width="180" align="center" prop="hoursNameOne"/>
            <el-table-column label="原房产(换房)" width="180" align="center" prop="hoursNameTow"/>
            <el-table-column label="销售金额" width="130" align="center" prop="totalMoney"/>
            <el-table-column label="现金金额" width="130" align="center" prop="cashMoney"/>
            <el-table-column label="签约时间" width="100" align="center" prop="signTime">
                <template slot-scope="scope">
                    <span  v-if="scope.row.signTime === null"
                    >未签约</span>
                    <span  v-if="scope.row.signTime != null"
                    >{{scope.row.signTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="客户登记时间" width="100" align="center" prop="oprTime"/>
            <el-table-column label="按揭金额" width="130" align="center" prop="bankMoney"/>
            <el-table-column label="按揭到账时间" width="100" align="center" prop="psTime"/>
            <el-table-column label="购买类别" width="80" align="center" prop="oprType"/>
            <el-table-column label="订购时间" width="100" align="center" prop="buyTime"/>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="formData.pageNum"
            :limit.sync="formData.pageSize"
            @pagination="getList"
        />
    </div>
</template>
<script>
import {projectNameOptions,custtypeOptions,custstateOptions} from "@/api/report/customer_report/customer_address_book";
import { getTheSalesmanList} from "@/api/report/customer_report/the_salesman";

export default {
    name:"customer_address_book",
    data() {
        return {
            // 查询参数
            formData: {
                pageNum:1,
                pageSize:10,
                projectid: undefined,
                custtype: undefined,
                custstate: undefined,
                custname: undefined
            },
            // 显示搜索条件
            showSearch: true,
            total:0,
            // 时间范围
            signdateDateRange:[],
            list:[],
            // 项目名称
            projectidOptions: [],
            // 客户性质
            custtypeOptions: [
                {label:"个体客户",value:"个体客户"},
                {label:"公司客户",value:"公司客户"},
            ],
            // 客户类型
            custstateOptions:[],
        }
    },
    created() {
        this.getList();
        this.projectidOptionsList();
        this.custstateOptionsList();
    },
    methods: {
        getList(){
            getTheSalesmanList(this.addDateRange(this.formData, this.signdateDateRange)).then( response => {
                this.list = response.rows;
                this.total = response.total;
            });
        },
        projectidOptionsList(){
            projectNameOptions().then( response => {
                this.projectidOptions = response.rows;
            });
        },
       custtypeOptionsList(){
             custtypeOptions().then( response => {
                this.custtypeOptions = response.rows;
            });
        },
       custstateOptionsList(){
             custstateOptions().then( response => {
                this.custstateOptions = response.rows;
            });
        },
        submitForm() {
            this.formData.pageNum = 1;
            this.getList();
        },
        resetForm() {
            this.signdateDateRange = [];
            this.$refs['elForm'].resetFields();
            this.submitForm();
        },
            /** 导出按钮操作 */
        handleExport() {
            this.download(
                'house_sale/export',
                {
                    ...this.queryParams
                }, 
                `report_${new Date().getTime()}.xlsx`
            )
        }
    }
};

</script>
<style>
</style>
